<template>
  <van-nav-bar placeholder left-arrow :clickable="false" :border="false"
    style="background: #f7f9fe; border-bottom: 1px solid #e8eaef; height: 4rem">
    <template #left>
      <div class="flex h-full items-center">
        <img :src="userInfo.VIPlog" alt="" v-show="userInfo.VIPlog" class="h-9 w-9" />
        <span class="text-xl font-[500] mx-4 text-[#1B1F26]">{{ userInfo.ComName }}</span>
        <div
          class="flex h-6 w-[4.375rem] bg-[url(@assets/images/friends/vip_bg.png)] bg-[length:100%_100%] bg-no-repeat">
          <span class="pl-[2.25rem] text-sm font-[700] leading-6 text-[#7e4f12]">
            {{ userInfo.UserVipYear }} 年
          </span>
        </div>
      </div>
    </template>
    <!-- <template #title>
      <div class="flex h-full flex-col justify-evenly">
        <div class="flex items-center justify-center">
          <span class="flex-1 truncate">{{
            conversationStore.storeCurrentConversation.showName
          }}</span>
          <span>{{ titleSuffix }}</span>
        </div>
        <online-or-typing-status v-if="isSingle" />
      </div>
    </template> -->
  </van-nav-bar>
  <div class="bg-[#EEF5FE] px-5 py-3">
    <div class="flex justify-between items-center">
      <div class="flex-1 text-[#4E5969] text-sm leading-[1.375rem]" :class="{ 'text-ellipsis mr-4': !isAll }">
        <p>
          {{ userInfo.ComMain }}
        </p>
        <p>
          您可以拨打电话，立马做生意:
          <span class="text-[#00B968]">{{ decryptText(userInfo.UserMobile) }}</span>
        </p>
        <p class="text-right">
          <van-button v-show="isAll" plain type="success" @click="openAll">
            收起
            <!-- <van-icon name="arrow-up" /> -->
          </van-button>
        </p>
      </div>
      <van-button v-show="!isAll" plain type="success" @click="openAll">
        查看全部
        <!-- <van-icon name="arrow-down" /> -->
      </van-button>
    </div>
    <!-- {{ userInfo.ComMain }} -->
  </div>

</template>

<script setup lang="ts">
// import useConversationStore from '@/store/modules/conversation'
// import { SessionType } from '@openim/wasm-client-sdk'
// import OnlineOrTypingStatus from './OnlineOrTypingStatus.vue'
import useFriendStore from '@store/modules/friend'
import { decryptText } from '@utils/aes'

const { userInfo } = toRefs(useFriendStore())

const isAll = ref(false)
const openAll = () => {
  isAll.value = !isAll.value
}

// const conversationStore = useConversationStore()

// const isSingle = computed(
//   () =>
//     conversationStore.storeCurrentConversation.conversationType === SessionType.Single,
// )

// const isNotification = computed(
//   () =>
//     conversationStore.storeCurrentConversation.conversationType ===
//     SessionType.Notification,
// )
// const titleSuffix = computed(() => {
//   let suffix = ''
//   if (!isNotification.value && !isSingle.value) {
//     suffix = `(${conversationStore.storeCurrentGroupInfo.memberCount || 0})`
//   }
//   return suffix
// })
</script>

<style lang="scss" scoped>
:deep(.van-nav-bar__content) {
  height: 100%;
}

.text-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

:deep(.van-button) {
  width: 6.5rem;
  height: 1.875rem;
  border-radius: 1rem;
  border: none
}
</style>
